<template>
  <div style="width: 100vw; height: 100vh;">
    <!-- <RouterView /> -->
    <el-button @click="clickExportData">导出数据</el-button>
    <div id="container" style="width: 100%; height: calc(100% - 60px)">
      <!-- 左侧节点面板 -->
      <!-- <div id="stencil"></div> -->
      <NodeTemp id="stencil" @dragEnd="handleDragEnd"/>
      <!-- 中间设计面板 -->
      <div id="graph-container"></div>

      <!-- 右侧节点配置面板 -->
       <div></div>
    </div>
  </div>
</template>
<script setup lang="ts">
import NodeTemp from '@/components/node-temp/node-temp.vue'
import { onMounted } from 'vue';
import YlyDrawGraph from '@/utils/antv-utils/antv-utils'
import type { NodeTempType } from './components/node-temp/node-temp';
// import { RouterLink, RouterView } from 'vue-router'
let ylyDrawGraph:YlyDrawGraph
onMounted(() => {
  const graphContainer = document.getElementById('graph-container')
  ylyDrawGraph = new YlyDrawGraph(graphContainer as HTMLElement);
  ylyDrawGraph.renderGraph()
});


function handleDragEnd(e: MouseEvent, nodeTemp: NodeTempType) {
  console.log(e, nodeTemp); // 可以获取到最后拖动后松开鼠标时的坐标和拖动的节点相关信息
  ylyDrawGraph.addHandleNode(
    e.pageX - 300,
    e.pageY - 40,
    new Date().getTime().toString(),
    nodeTemp
  )
}
function clickExportData() {
  console.log('导出数据', ylyDrawGraph.rootGraph.toJSON())
}
</script>
<style lang="scss">
#container {
  display: flex;
  border: 1px solid #dfe3e8;
}

#graph-container {
  width: calc(100% - 180px);
  height: 100%;
}
.x6-widget-stencil  {
  background-color: #fff;
}
.x6-widget-stencil-title {
  background-color: #fff;
}
.x6-widget-stencil-group-title {
  background-color: #fff !important;
}
.x6-widget-transform {
  margin: -1px 0 0 -1px;
  padding: 0px;
  border: 1px solid #239edd;
}
.x6-widget-transform > div {
  border: 1px solid #239edd;
}
.x6-widget-transform > div:hover {
  background-color: #3dafe4;
}
.x6-widget-transform-active-handle {
  background-color: #3dafe4;
}
.x6-widget-transform-resize {
  border-radius: 0;
}
.x6-widget-selection-inner {
  border: 1px solid #239edd;
}
.x6-widget-selection-box {
  opacity: 0;
}
#graph-container {
  width: calc(100% - 200px);
  height: 100vh;
}
</style>
